<extend name="common/base" />
<block name="resource">
   <link href="__ASSET__/Home/v4/src/css/home.css" rel="stylesheet">
   <link href="__ASSET__/Home/v4/src/css/explore.css" rel="stylesheet">
   <link href="__ASSET__/Home/v4/src/css/user-center.css" rel="stylesheet">
   <link href="__ASSET__/Home/v4/src/css/user_fans.css" rel="stylesheet">
   <style>
     .mine a{
           border-right:none;
     }
     .show_img img{
       width:100%;
     }
   </style>
</block>
<block name="content">
          <!--中间位置-->
    <div class="main container">
        <div class="user-center-main white-bg gray-border marginb20">
            <!--左边板块-->
            <include file="Ucenter/baseinfo" />
            <!--右边板块-->
            <div class="user-main-right">
                <div class="scroll_area" >
                    <div class="right_area_title">
                              <div class="left l_title">关注游戏设置</div>
                    </div>
                    <div class="game_container">
                          <div class="follow_game">
                               <p class="follow_game_p"><span></span>已关注游戏</p>
                               <ul class="follow_game_ul" data-follow='1'>
                                   <volist name="gameList" id="game">
                                     <if condition="$game.is_scribe eq true">
                                       <li data-id="{$game.id}">
                                           <div class="show_img relative">
                                               <img  src="__ASSET__/Home/v4/src/images/game_default.jpg" data-original="{$game.cover}" class="lazy">
                                               <div class="img_bg"></div>
                                               <span class="follow_btn_game">取消关注</span>
                                           </div>
                                           <p class="follow_game_ul_p">{$game.name}</p>
                                       </li>
                                     </if>
                                   </volist>
                               </ul>
                          </div>
                          <div class="follow_game">
                               <p class="follow_game_p"><span></span>未关注游戏</p>
                               <ul class="follow_game_ul" data-follow='0'>
                                     <volist name="gameList" id="game">
                                       <if condition="$game.is_scribe eq false">
                                         <li data-id="{$game.id}">
                                             <div class="show_img relative">
                                                 <img  src="__ASSET__/Home/v4/src/images/game_default.jpg" data-original="{$game.cover}" class="lazy">
                                                 <div class="img_bg"></div>
                                                 <span class="follow_btn_game">关注</span>
                                             </div>
                                             <p class="follow_game_ul_p">{$game.name}</p>
                                         </li>
                                       </if>
                                       </volist>
                               </ul>
                          </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</block>
<block name="footer"></block>
<block name="component">
    <script src="__ASSET__/Home/v4/dist/js/set_common_bg.js?v=1.0"></script>
    <script>
        window._THIS = {
            doScribeUrl:"{:U('game/scribe')}", // id
            unScribeUrl:"{:U('game/unscribe')}",
        };
      $(function(){
           tool.lazyImg($("img.lazy"));
           tool.setHeight();
           img_hover();
      })
      function  img_hover (){
            $(".follow_game_ul li").hover(function(){
                   $(this).find('.follow_btn_game').stop().animate({'top':'50%'},'fast');
                   $(this).find('.img_bg').show();
               },function(){
                   $(this).find('.follow_btn_game').stop().animate({'top':'120%'},'fast');
                   $(this).find('.img_bg').hide();
           })
      }
      $(".follow_game_ul").on('click','.follow_btn_game',function(){
            var is_game_follow=$(this).parents('.follow_game_ul').attr('data-follow');
            var user_game_num=$(".user_game_num").html();
            var data_id=$(this).parent().parent().attr('data-id');
            var url=is_game_follow==0?_THIS.doScribeUrl:_THIS.unScribeUrl;
                dataFollow=is_game_follow==0?1:0;
            var _that=$(this);
            $.get(url,{'id':data_id},function(data){
                  if(data.state==0){
                        layer.msg(data.info);
                        var clone_obj=_that.parent().parent().clone();
                        follow_name=is_game_follow==0?'取消关注':'关注';
                        clone_obj.find('.follow_btn_game').html(follow_name);
                        clone_obj.find('.follow_btn_game').stop().animate({'top':'120%'},'fast');
                        clone_obj.find('.img_bg').hide();
                        setTimeout(function(){
                             _that.parent().parent().remove();
                             $('ul[data-follow='+dataFollow+']').append(clone_obj[0]);
                             user_game_num=is_game_follow==0?(++user_game_num):(--user_game_num);
                             $(".user_game_num").html(user_game_num);
                             img_hover();
                             tool.setHeight();
                        },1500)
                  }
            })
      }) 
    </script>
</block>